<!DOCTYPE html>
<ui:composition template="/master.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name="content">
	<h:form id="form">
		<p:growl id="msgs" showDetail="true" life="1000" />

		<p:panel header="Promociones">
			<p:dataTable id="tablaPromociones" var="promo"
				value="#{promocionBean.listaPromociones}"
				selection="#{promocionBean.selectedPromocion}"
				rowKey="#{promo.nombrePromo}" editable="true" style="width:70%">

				<p:ajax event="rowEdit" listener="#{promocionBean.onRowEdit}"
					update=":form:msgs" />
				<p:ajax event="rowEditCancel" listener="#{promocionBean.onRowCancel}"
					update=":form:msgs" />

				<p:column selectionMode="single" style="width:2%;text-align:center" />

				<p:column headerText="Nombre" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{promo.nombrePromocion}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="nombreInput" value="#{promo.nombrePromocion}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Descripción" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{promo.descripcionPromocion}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="descrInput" value="#{bebid.descripcionPromocion}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Fecha Inicio" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{promo.fechaInicio}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="fechaIniInput" value="#{promo.fechaInicio}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
<p:column headerText="Fecha Fin" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{promo.fechaFin}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="fechaFinInput" value="#{promo.fechaFin}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Porcentaje" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{promo.porcentaje}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="porcentajeInput" value="#{promo.porcentaje}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Modificar"
					style="width:70px;text-align: center">
					<p:rowEditor />
				</p:column>

				<f:facet name="footer">
					<p:outputPanel style="text-align:left">

						<p:commandButton process="tablaPromociones"
							update=":form:tablaPromociones" value="Borrar"
							actionListener="#{promocionBean.eliminarPromocion}">
							<p:confirm header="Confirmation" message="Are you sure?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:outputPanel>
				</f:facet>


			</p:dataTable>

			<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				<p:commandButton value="Yes" type="button"
					styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				<p:commandButton value="No" type="button"
					styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
			</p:confirmDialog>

			<br />
			<p:fieldset id="panelNuevaPromocion" legend="Nueva Promoción"
				toggleable="true" toggleSpeed="500" collapsed="true"
				style="width:46%">

				<h:panelGrid columns="3" cellpadding="5">
					<h:outputLabel value="Nombre:" />
					<p:inputText id="nombre" value="#{promo.nombrPromocion}"
						required="true" label="Nombre" />
					<p:message for="nombre" display="icon" />

					<h:outputLabel value="Descripción:" />
					<p:inputText id="decsripcion" value="#{promo.descripcionPromocion}"
						required="true" label="Descripción" />
					<p:message for="descripcion" display="icon" />

					<h:outputLabel value="Fecha Inicio:" />
					<p:inputText id="fechaIni" value="#{promo.fechaInicio}"
						required="true" label="Fecha Inicio" />
					<p:message for="fechaIni" display="icon" />

<h:outputLabel value="Fecha Fin:" />
					<p:inputText id="fechaFin" value="#{promo.fechaFin}"
						required="true" label="Fecha Fin" />
					<p:message for="fechaFin" display="icon" />
					
						<h:outputLabel value="Porcentaje:" />
					<p:inputText id="porcentaje" value="#{promo.porcentajePromocion}"
						required="true" label="Porcentaje" />
					<p:message for="porcentaje" display="icon" />
					

					<f:facet name="footer">
						<p:commandButton value="Guardar" ajax="false"
							actionListener="#{promocionBean.guardarPromocion}" />
					</f:facet>
				</h:panelGrid>
			</p:fieldset>



		</p:panel>
	</h:form>
</ui:define>
</ui:composition>
